<!-- 机构树组件 -->
<template>
  <el-col>
    <el-input
     placeholder="医检名称"
     v-model="institutionName"
     clearable
     size="mini"
     style="width: 91%;"/>
  <div style="margin-top:5%;;border: 1px solid #dccdcd; margin-right:5%;">
    <el-tree
        :data="pickInstitutionList"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        node-key="value"
        :current-node-key="institutionIds"
        default-expand-all
        :loading="loadingIns"
        @node-click="handleNodeClick"
        style="overflow-y: auto; max-height: 776px;"
        highlight-current/>
 </div>
 </el-col>
</template>

<script>
import InstitutionApi from '@/api/institution/institution';
export default {
props: {
    id: {
        type:Number
    }
},
data() {
    return{
        defaultProps: {
            children: "children",
            label: "label"
        },
        pickInstitutionList:[], // 机构列表
        institutionName:'',
        institutionId:null,
        loadingIns: false,
        institutionIds:100
    }
},
created(){
    this.getInstitutionList();
    this.institutionIds = Number(localStorage.getItem('institutionIds'))
    this.institutionId = this.id
},
watch:{
    // 根据机构名称筛选结构树
    institutionName(val) {
        this.$refs.tree.filter(val);
    },
    id(val) {
        this.institutionId = val
    },
},
methods:{
        // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
        this.institutionId = data.value;
        // console.log(data.value)
        this.$emit('institutionId', data.value)
    },
    getInstitutionList() {
      // 获取机构列表
      let _this = this
      _this.loadingIns = true
        let cond = {
            institutionType: 1
        }
        InstitutionApi.getInstitutionNameList(cond)
          .then(res => {
            setTimeout(() => {
              _this.loadingIns = false
              _this.pickInstitutionList = res.data.map(item => {
                return {
                  value: item.institutionId,
                  label: item.institutionName
                }
              })
            }, 200)
          })
          .catch(error => {
            _this.pickInstitutionList = []
            console.error(error)
          })
    },
},
}
</script>

<style>
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #75b3f1 !important;
  color: #f6f6f6 !important;
}
</style>
